<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_为什么使用</title>
    <style type="text/css">
        .panel {
            width: 400px;
            border: 1px solid #ccc;
        }
        
        .panel>* {
            padding: 15px;
            border-bottom: 1px solid #ccc;
        }
        
        .footer {
            border: none;
        }
    </style>
</head>
<!-- 
    日常生活:在日常生活中很多地方都有插槽,电脑的 USB 插槽,插拔中的电源插槽,它让设备具有更多的扩展性;
    Vue里的插槽(即组件的插槽):也是让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么.
 -->

<body>
    <div id="app">
        <Child>
            <!-- 终于可以在组件标签里插入内容了...<br>
            <p slot="content" style="color:red">我是取了名字的插槽</p> -->

            <div slot="title">这是标题...</div>
            <div slot="content">这是内容...</div>
            <div slot="footer">这是页脚</div>

        </Child>
    </div>
</body>
<script src="../vue.js"></script>

<template id="child">
    <div>
        <div class="panel">
            <div class="title">
                <!-- 这是标题 -->
                <slot name="title"></slot>
            </div>
            <div class="content">
                <!-- 这是内容... -->
                
                <!-- 
                    若插槽里面有内容,但组件里没有内容,就会取插槽里的内容;若组件里有内容就会取组件里的(即会优先取组件里的内容)
                    匿名插槽: <slot></slot> 即没有名字的插槽
                    具名插槽: <slot name="content"></slot> 即有 name 属性的插槽
                 -->
                <slot name="content"></slot>
            </div>
            <div class="footer">
                <!-- 这是页脚 -->
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    const vm = new Vue({
        el: '#app',
        components: {
            Child: {
                template: '#child'
            }
        }
    })
</script>

</html>